<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>DeerWMS</title>
    <meta name="keywords" content="DeerWMS">
    <meta name="description" content="DeerWMS">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <!--<link th:href="@{logo.ico}" rel="stylesheet"/>-->
    <link rel="shortcut icon" href="../static/logo.ico" th:href="@{logo.ico}"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/css/skins.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css?v=3.3.0}" rel="stylesheet"/>
    <style type="text/css">
        #content-main.max { height: calc(100% - 110px); overflow: hidden; width: 100%; height: 100%; left: 0px; position: absolute; top: 0px; z-index: 9998; margin: 0; }
    </style>
    <script src="/js/vue.js"></script>
    <script src="/js/jquery.min.js"></script>
    <link th:href="@{/css/element.css}" rel="stylesheet"/>
    <script th:src="@{/js/element.js}"></script>
    <style>
        #timeOutLoading{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.8);
            z-index: 2020;
            display: none;
            text-align: center;
            padding-top: 300px;
        }
    </style>
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow: hidden" th:classappend="${@config.getKey('sys.index.skinName')}">
<div id="wrapper" onmousemove="updateTimeOut()">

    <div class="row border-bottom">
        <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0;height: 50px">
            <div class="navbar-header">
                <a class="navbar-minimalize minimalize-styl-2" style="color:#FFF;" href="#" title="收起菜单">
                    <i class="fa fa-bars"></i>
                </a>
            </div>
            <div class="navbar-header" style="margin-top: 9px;margin-left: 17px;">
                <a th:href="@{/system/billinControl}" class="btn btn-warning" shiro:hasPermission="system:operator:floor">
                    <i class="fa fa-download"></i> 入库操作台
                </a>
            </div>
            <ul class="nav navbar-top-links navbar-right welcome-message" >
                <!--<li><a title="视频教程" href="http://doc.ruoyi.vip/#/standard/spjc" target="_blank"><i class="fa fa-video-camera"></i> 视频教程</a></li>
                <li><a title="开发文档" href="http://doc.ruoyi.vip" target="_blank"><i class="fa fa-question-circle"></i> 开发文档</a></li>-->
                <li><a title="全屏显示" id="fullScreen"><i class="fa fa-arrows-alt"></i> 全屏显示</a></li>

                <li class="dropdown user-menu">
                    <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
                        <img th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{/profile/avatar/} + ${user.avatar}" class="user-image">
                        <span class="hidden-xs">[[${user.userName}]]</span>
                        <input id="userIdIds" th:value="${user.userId}" type="text" style="display:none">
                        <input id="loginName" th:value="${user.loginName}" type="text" style="display:none">
                    </a>
                    <ul class="dropdown-menu">
                        <li class="mt5">
                            <a th:href="@{/system/user/profile}" class="menuItem">
                                <i class="fa fa-user"></i> 个人中心</a>
                        </li>
                        <li>
                            <a onclick="resetPwd()" class="menuItem">
                                <i class="fa fa-key"></i> 修改密码</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a th:href="@{logout}">
                                <i class="fa fa-sign-out"></i> 退出登录</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>

    <!--左侧导航开始-->
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="nav-close">
            <i class="fa fa-times-circle"></i>
        </div>
        <div class="sidebar-collapse">
            <ul class="nav" id="side-menu">
                <!--<li class="logo">
				     <span class="logo-lg">WMS</span>
            	</li>
            	<li style="width: 300px">
                    
            		<div class="user-panel">
            			<a class="menuItem" title="个人中心" th:href="@{/system/user/profile}"> 
            				<div class="hide" th:text="个人中心"></div>
					        <div class="pull-left image">
		                    	<img th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{/profile/avatar/} + ${user.avatar}" class="img-circle" alt="User Image">
					        </div>
				        </a>
				        <div class="pull-left info">
				          <p>[[${user.loginName}]]</p>
				          <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
				          <a th:href="@{logout}" style="padding-left:5px;"><i class="fa fa-sign-out text-danger"></i> 注销</a>
				        </div>
				    </div>
            	</li>-->
                 <li class="active">
                    <a href="index.html"><i class="fa fa-home"></i> <span class="nav-label">主页</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li class="active"><a class="menuItem" th:href="@{/system/main}">主页</a></li>
                    </ul>

                     <ul class="nav nav-second-level">
                         <li class="active"><a class="menuItem" th:href="@{/system/cellList}">货位一览</a></li>
                     </ul>

                </li>
                <li th:each="menu : ${menus}">
                	<a href="#">
                		<i class="fa fa fa-bar-chart-o" th:class="${menu.icon}"></i>
                    	<span class="nav-label" th:text="${menu.menuName}">一级菜单</span> 
                    	<span class="fa arrow"></span>
                	</a>
                   <ul class="nav nav-second-level collapse">
						<li th:each="cmenu : ${menu.children}">
							<a th:if="${#lists.isEmpty(cmenu.children)}" class="menuItem" th:utext="${cmenu.menuName}" th:href="@{${cmenu.url}}">二级菜单</a>
							<a th:if="${not #lists.isEmpty(cmenu.children)}" href="#">[[${cmenu.menuName}]]<span class="fa arrow"></span></a>
							<ul th:if="${not #lists.isEmpty(cmenu.children)}" class="nav nav-third-level">
								<li th:each="emenu : ${cmenu.children}"><a class="menuItem" th:text="${emenu.menuName}" th:href="@{${emenu.url}}">三级菜单</a></li>
							</ul>
						</li>
					</ul>
                </li>
            </ul>
        </div>
    </nav>
    <!--左侧导航结束-->
    
    <!--右侧部分开始-->
    <div id="page-wrapper" class="gray-bg dashbard-1">

        <div class="row content-tabs">
<!--            <button class="roll-nav roll-left tabLeft">-->
<!--                <i class="fa fa-backward"></i>-->
<!--            </button>-->
            <nav class="page-tabs menuTabs">
                <div class="page-tabs-content">
                    <a href="javascript:;" class="active menuTab" data-id="/system/main">首页</a>
                </div>
            </nav>
<!--            <button class="roll-nav roll-right tabRight">-->
<!--                <i class="fa fa-forward"></i>-->
<!--            </button>-->
            <div class="btn-group roll-nav roll-right">
                <button class="dropdown J_tabClose" data-toggle="dropdown">
                                                                          页签操作</span>
                </button>
                <ul role="menu" class="dropdown-menu dropdown-menu-right">
                     <li><a class="tabCloseCurrent" href="javascript:void();">关闭当前</a></li>
                     <li><a class="tabCloseOther" href="javascript:void();">关闭其他</a></li>
					 <li><a class="tabCloseAll" href="javascript:void();">全部关闭</a></li>
					 <li><a class="tabMaxCurrent" href="javascript:void();">全屏显示</a></li>
                </ul>
            </div>
            <a href="#" class="roll-nav roll-right tabReload"><i class="fa fa-refresh"></i> 刷新</a>
        </div>
        
        <a id="ax_close_max" class="ax_close_max" href="#" title="关闭全屏"> <i class="fa fa-times-circle-o"></i> </a>
                    
        <div class="row mainContent" id="content-main">
            <iframe class="RuoYi_iframe" name="iframe0" width="100%" height="100%" data-id="/system/main"
                    th:src="@{/system/main}" frameborder="0" seamless></iframe>
        </div>
       <!-- <div class="footer">
            <div class="pull-right">© [[${copyrightYear}]] RuoYi Copyright </div>
        </div>-->
    </div>
    <audio id="bgMusic" loop>
        <source src="/music/warning.mp3" type="audio/mpeg">
        <source src="/music/warning.ogg" type="audio/ogg">
        <source src="/music/warning.wav" type="audio/wav">
        Your browser does not support the video tag
    </audio>
    <!--右侧部分结束-->
</div>

<div id="timeOutLoading">
    <p style="color: #ffffff;">密码</p>
    <p>
        <input onkeydown="timeOutIptenter(event)" style="width: 260px;height: 30px;" type="password">
    </p>
</div>
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.3.0}"></script>
<script th:src="@{/ruoyi/index.js}"></script>
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
<script th:inline="javascript"> 
var ctx = [[@{/}]];
/*用户管理-重置密码*/
function resetPwd() {
    debugger

    var url = ctx + 'system/user/profile/resetPwd';
    $.modal.open("重置密码", url, '800', '500');
}

</script>
<script>
    var app = new Vue({
        el : '#wrapper',
        data:{
            /*return {
                websock: null,
            }*/
        },
        created() {
            this.initWebSocket();
        },
        destroyed() {
            this.websock.close() //离开路由之后断开websocket连接
        },
        methods: {
            initWebSocket(){ //初始化weosocket
                var ip = window.location.host;
                var userId = $("#userIdIds").val();
                const wsuri = "ws://"+ip+"/websocket/"+userId;
                this.websock = new WebSocket(wsuri);
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onclose = this.websocketclose;
            },
            websocketonopen(){ //连接建立之后执行send方法发送数据
                let actions = {"test":"12345"};
                this.websocketsend(JSON.stringify(actions));
            },
            websocketonerror(){//连接建立失败重连
                this.initWebSocket();
            },
            websocketonmessage(e){ //数据接收
                const redata = JSON.parse(e.data);
                if(redata.data !== "连接成功"){
                    debugger
                    var audio = document.getElementById("bgMusic");
                    audio.play();
                    var data = redata;
                    if(data.type === "1"){
                        $.modal.confirm(data.msg+",是否确定关闭报警？", function() {
                            $.modal.loading("处理中，请稍后！");
                            $.ajax({
                                type: "post",
                                url: "/warnInformation/update",
                                data: JSON.stringify({warnId:data.warnId,state:2}),
                                dataType: "json",
                                contentType: "application/json;charset-UTF-8",
                                async: true,
                                error: function (data) {
                                    $.modal.msgError("系统错误，请联系管理员");
                                    $.modal.closeLoading();
                                },
                                success: function (data) {
                                    $.modal.closeLoading();
                                    if (data.code === 200) {
                                        $.modal.msgSuccess("处理成功")
                                    } else {
                                        $.modal.msgError(data.msg);
                                    }
                                }
                            });
                            audio.pause();
                            audio.load();
                        });
                    }
                }
                console.log(e.data);
            },
            websocketsend(Data){//数据发送
                this.websock.send(Data);
            },
            websocketclose(e){  //关闭
                console.log('断开连接',e);
            },
        },
    }),
    /*var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
        var ip = window.location.host;
        var userId = $("#userIdIds").val();
        socket = new WebSocket("ws://"+ip+"/websocket/"+userId);
        //打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            // socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(msg) {
            if(msg.data !== "连接成功"){
                debugger
                var audio = document.getElementById("bgMusic");
                audio.play();
                var data = JSON.parse(msg.data);
                if(data.type === "1"){
                    $.modal.confirm(data.msg+",是否确定关闭报警？", function() {
                        $.modal.loading("处理中，请稍后！");
                        $.ajax({
                            type: "post",
                            url: "/warnInformation/update",
                            data: JSON.stringify({warnId:data.warnId,state:2}),
                            dataType: "json",
                            contentType: "application/json;charset-UTF-8",
                            async: true,
                            error: function (data) {
                                $.modal.msgError("系统错误，请联系管理员");
                                $.modal.closeLoading();
                            },
                            success: function (data) {
                                $.modal.closeLoading();
                                if (data.code === 200) {
                                    $.modal.msgSuccess("处理成功")
                                } else {
                                    $.modal.msgError(data.msg);
                                }
                            }
                        });
                        audio.pause();
                        audio.load();
                    });
                }
            }
            console.log(msg.data);

            //发现消息进入    开始处理前端触发逻辑
            /!*$.modal.confirm("是否确定关闭报警？", function() {
                audio.pause();
                audio.load();
            });*!/
        };
        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }*/
        //离开页面时，关闭socket
        //jquery1.8中已经被废弃，3.0中已经移除
        // $(window).unload(function(){
        //     socket.close();
        //});
    // }
</script>

<script>
    let timeNum = null; // 定义一个变量用来存请求到的时间;
    let loginName = $("#loginName").val();
    let timeOutLoading = document.querySelector('#timeOutLoading');
    let accountNum = localStorage.getItem('accountNum');
    let timeOut = null; // 定时器存在这里
    /**
     * 如果需要请求来时间,就在这里(这几个方法前面)发个请求拿到,
     * timeNum = (请求来的值);
     */
    $.ajax({
        type: "get",
        url: "workerOrderIssueTime/1",
        data: {},
        success: function (r) {
            if (r.code == 200) {
                timeNum = r.data.lockTime;
            }
        }
    });

    /**
     * updateTimeOut
     * 绑定在最外层 div#wrapper 的鼠标移动事件上
     * 鼠标移动就会刷新定时器
     */
    function updateTimeOut() {
        let qwe = parseFloat(timeNum) * 60 * 1000;
        clearTimeout(timeOut); // 清除之前的定时器
        timeOut = setTimeout(() => { // 创建一个新的定时器
            localStorage.setItem('accountNum', loginName); // 把时间存到缓存里,这样防止刷新页面数据重置(如果不是用遮罩层而是新页面的话就不需要了)
            if (timeOutLoading !== null && timeOutLoading !== undefined) {
                document.querySelector('#timeOutLoading input').focus();
                timeOutLoading.style.display = 'block'; // 显示遮罩层
            }
        },qwe);
        // }, 5 * 1000); // 这个5000可以使用请求来的值 timeNum 时间是毫秒
    }

    /**
     * timeOutIptenter
     * 这个是用来使用回车事件的,输入了密码,按回车发请求
     */
    function timeOutIptenter(event) {
        if (event.keyCode === 13) { // 如果是回车
            let value = document.querySelector('#timeOutLoading input').value;
            $.ajax({
                type: "post",
                url: "/verify",
                data: {
                    "username": loginName,
                    "password": value
                },
                success: function (r) {
                    if (r.code == 0) {
                        timeOutLoading.style.display = 'none';
                        document.querySelector('#timeOutLoading input').value = '';
                        localStorage.removeItem('accountNum'); // 解除遮罩层后就清除掉这个缓存
                        updateTimeOut();
                        $.modal.msgSuccess("验证成功");
                    } else {
                        document.querySelector('#timeOutLoading input').value = '';
                        document.querySelector('#timeOutLoading input').focus();
                        $.modal.msg("密码错误或登录失效");
                    }
                }
            });
        } else {
            return false
        }
    }

    if (timeOutLoading !== null && timeOutLoading !== undefined) {
        if (accountNum === undefined || accountNum === null || accountNum === '') { // 看一下缓存里有没有存这个,
            updateTimeOut()
        } else { // 如果有值说明之前是有遮罩层的,就显示遮罩层
            document.querySelector('#timeOutLoading input').focus();
            timeOutLoading.style.display = 'block';
        }
    }

</script>

</body>
</html>
